<template>
  <div class="test">
    <button @click="toggle">toggle</button>
    <button @click="isShow = !isShow">toggle</button>
    <!-- v-if="Boolean" -->
    <div v-if="isShow"></div>
    <div v-show="isShow">显示隐藏</div>
    <!--
      v-if: 是通过js操作DOM元素，控制元素的添加和删除
      v-show：是通过css设置样式的显示和隐藏

      使用场景：
        v-if 一般用于条件处理或者是多个
        v-show 一般用于频繁点击按钮的时候
     -->

    <hr />

    <input type="text" v-model="number" />
    <div v-if="number >= 90">优秀</div>
    <div v-else-if="number >= 80 && number < 90">良好</div>
    <div v-else>你懂得</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      number: 90
    }
  },
  methods: {
    toggle() {
      // 取反
      this.isShow = !this.isShow
    }
  }
}
</script>
<style lang="scss"></style>
